<template>
	<div class="cart">
		<header>
			<router-link to="/mobile/home"><</router-link>
			<h3>购物车</h3>
		</header>
		<div class="box" v-show="carts.length != 0">
			<ul>
				<li v-for="(item,i) in carts" :key="item.id">
					<div class="check">
						<input type="checkbox" v-model="check" :value="item.id" @change="checkOne()">
					</div>
					<div class="img">
						<img :src="`http://127.0.0.1/api/public/showimg/${item.book.pic}`">
					</div>
					<div class="msg">
						<p>{{item.book.name}}</p>
							<aside class="right">
								<span>￥{{item.price}}</span>
								<button @click="add(-1,item.id)">-</button><label>{{item.num}}</label><button @click="add(1,item.id)">+</button>
							</aside>
					</div>
				</li>
			</ul>
		</div>
		<div class="box2" v-show="carts.length == 0">
			<img  src="../../assets/img//mobile/1711681074809.jpg"/>
		</div>
		<span class="span">为   你   推  荐</span>
		<MobileHomeList proptitle="新书上市" :proplist="newlist"></MobileHomeList>
		<div class="pay">
			<p><input type="checkbox"  v-model="checkall" @change="addAll()"/>全选</p>
			<span>合计:￥{{sum}}</span>
			<button @click="addRate()">去结算({{check.length}})</button>
		</div>
	</div>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
import MobileHomeList from '../../components/mobile/home/MobileHomeList.vue'
	export default {
		name:'MoblieCart',
		components:{
			MobileHomeList
		},
		data(){
			return{
				sum:0,
				checkall:false,
				check:[],
				newlist:[],
				carts:[],
			}
		},
		methods:{
			...mapActions('order',['actionHistory','delHistory']),
			checkOne(){
				console.log(this.check);
				this.check = Array.from(new Set(this.check));
				this.checkall = this.check.length == this.carts.length?true:false;
				this.sumPrice();
			},
			addAll(){
				if(this.checkall){
					this.carts.forEach((item)=>{
						this.check.push(item.id);
					})
					this.check = Array.from(new Set(this.check));
				}else{
					this.check=[];
				}
				console.log(this.check);
				this.sumPrice();
			},
			add(num,id){
				let n=	this.carts.findIndex(index => index.id == id);
				console.log(n);
				this.carts[n].num+=num;
				if(this.carts[n].num<1){
					this.carts[n].num=1;
				}
				this.check.push(id);
				this.checkOne();
			},
			sumPrice(){
				let sum = 0;
				this.check = Array.from(new Set(this.check));
					this.check.forEach((item)=>{
					let n=	this.carts.findIndex(index => index.id == item)
						sum += this.carts[n].price*this.carts[n].num;	
					})
					this.sum = sum;
			},
			find(num){
				let bool = false;
				this.orders.forEach((item)=>{
					if(item.id == this.carts[num].id){
						bool = true;
						return;
					}
				})
				return bool;
			},
			addRate(){
				if(this.check.length == 0){
					this.$message({
						message:'请选择商品',
						type:'error',
					})
					return;
				}
				this.delHistory();
				this.check.forEach((item)=>{
					let n = this.carts.findIndex(obj => obj.id == item);
					console.log('n='+n);
					console.log(this.find(n))
					if(!this.find(n)){
						let m = this.carts[n];
						this.actionHistory({
							checked:true,
							id:m.id,
							num:m.num,
							price:m.price,
							book:{
								id:m.book.id,
								name:m.book.name,
								pic:m.book.pic,
							}
						  })
					}	
				})
				this.$router.push({
					path:'/mobile/order'
				})
			}
		},
		computed:{
			...mapState('order',['orders'])
		},
		mounted() {
			this.$get('/api/fore/cart/findMyCarts').then((resp)=>{
				this.carts = resp.data.data;
				console.log(this.carts);
			})
			this.$get('/api/public/findPageBook/1/6/0').then((resp)=>{
				this.newlist = resp.data.data.books;
				console.log(this.newlist)
			})
		}
	}
</script>

<style scoped>
	.cart{
		width: 100%;
		height: 100%;
		background-color: #DCDCDC;
	}
	.cart header{
		width: 100%;
		height: 3.5rem;
		background-color: white;
		display: flex;
		align-items: center;	
	}
	.cart header a{
		font-size: 1.25rem;
		margin-left: 1.25rem;
		margin-right: 35%;
	}
	.cart .box{
		width: 95%;
		margin: 0.625rem auto;
	}
	.cart .box ul{
		width: 100%;
		align-items: center;
		
	}
	.cart .box2{
		width: 100%;
		height: 9rem;
		border-top: 1px solid gainsboro;
		background-color: white;
	}
	.cart .box2 img{
		display: block;
		margin: 0 auto;
		width: 50%;
		height:100%;
	}
	.cart .box ul li{
		width: 100%;
		height: 8rem;
		display: flex;
		align-items: center;
		background-color: white;
		margin-bottom: 1rem;
		border-radius: 0.5rem;
	}
	.cart .box ul li .check{
		width: 10%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cart .box ul li .img{
		width: 30%;
		height: 100%;
		border-radius: 0.3125rem;
	}
	.cart .box ul li .img img{
		width: 75%;
		height: 85%;
		display: flex;
		margin: 0.6rem auto;
		
	}
	.cart .box ul li .msg{
		width: 60%;
		height: 100%;
	}
	.cart .box ul li .msg p {
		width: 100%;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.cart .box ul li .right{
		width: 100%;
		margin-top: 5rem;
	}
	.cart .box ul li .right span{
		margin-right: 40%;
		color: red;
	}
	.cart .box ul li .right button{
		background-color: white;
		font-size: 1.25rem;
		border: none;
		outline: none;
	}
	.cart .span{
		display: flex;
		width: 100%;
		height: 2.5rem;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 1.25rem;
	}
	.cart .pay{
		width: 100%;
		height: 4rem;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
	}
	.cart .pay button{
		height: 3.125rem;
		width: 8rem;
		border-radius: 10rem;
		border: none;
		outline: none;
		color: white;
		background-color: #fe3b1d;
		font-size: 1rem;
	}
	.cart .pay input[type='checkbox']{
		height: 1.2rem;
		width: 1.2rem;
	}
	.cart .pay p{
		height: 100%;
		width: 20%;
		display: flex;
		align-items: center;
		margin-left: 0.625rem;
	}
	input[type="checkbox"]{
			  appearance: none;
			  width: 20px;
			  height: 20px;
			  border: 1px solid #aaaaaa;
			  border-radius: 50%;
	}
	input[type="checkbox"]:checked{
			  background: red;
			  &:before{
				  content: '\2714';
				  color: white;
				  margin-left: 0.25rem;
			  }
	}
</style>
